<template>
    <div id="mainPage">  
        <div class="header">
            <header-vue></header-vue>
        </div>
        <side-bar v-on:ifShrink = "shrinkMenu" style="z-index:10;position:absolute" :active-name="activeName"></side-bar>
        <div class="single-page" :style="{paddingLeft: ifShrink?'2.6%':'13%'}">
            <RouterView></RouterView>
        </div>
    </div>
</template>
<script>
import headerVue from '@/components/Header.vue';
import sideBar from '@/components/sidebarMenu.vue';
import { io } from "socket.io-client";
export default{
components:{
        headerVue,
        sideBar
    },
    data(){
        return{
            activeName:this.$route.name,
            ifShrink:false,
            socket:null
        }
    },
    mounted(){
        //console.log(111);
    },
    methods: {
        shrinkMenu(ifShrink){
            this.ifShrink = ifShrink;
            console.log(444,ifShrink);

            if(this.ifShrink){
                var pageSize = document.getElementsByClassName('single-page');
                console.log(777,pageSize);
                //pageSize.style.paddingLeft = "15%"
            }else{
                //pageSize.style.paddingLeft = "11.9%"
            }
        },
        
    },
}
</script>

<style lang="less">
#mainPage{
    .header{
        height: 100%;
        width:100%;
    }
    .single-page{
        position: absolute;
        transition: padding .3s;
        margin-left: 20px;
        padding: 20px;
        height: 100%;
        width:100%;
        background-color: rgb(244, 248, 255);
    }
}
</style>